import React, { Component } from 'react';

import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
// import 'leaflet/dist/leaflet.css';

const position = [30.2818, 120.0690];

const googleTileUrl = 'http://mt3.google.cn/vt/lyrs=y&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galile';
const amapTileUrl = 'http://webrd04.is.autonavi.com/appmaptile?size=1&scale=1&style=8&x={x}&y={y}&z={z}'

class App extends Component {
    constructor() {
        super()
        this.state = {
            lat: 30.2818,
            lng: 120.0690,
            zoom: 13
        }
    }

	componentWillMount() {

    }

	componentDidMount() {

        console.log(this.refs.map.leafletElement);
	}

    render() {
        return (
            <Map center={position} zoom={13} maxZoom={18} minZoom={10} ref="map" attributionControl={false}>
                <TileLayer
                    url={amapTileUrl}
                    attribution="<a>localhost</a>"
                    ref="layer"/>
                <Marker
                    position={position}
                    draggable={true}
                    onDragend={ (ev) => {
                        console.log(ev.target.getLatLng())
                    }}
                />
            </Map>
        );
    }
}

export default App;
